{{! Lobby header }}
<div class="relative flex flex-col px-5">
    <div class="flex items-center justify-between mb-2">
        <div class="flex-1 min-w-0">
            <h2 class="text-xl font-medium text-base-content" id="sbr_ele_usertop">
                Spectator <span class="animate-pulse inline-flex rounded-full h-1.5 w-1.5 mb-0.5 ml-0.5 align-middle bg-neutral"></span>
            </h2>
        </div>
        <div class="flex mt-0 ml-4">
            <button type="button" class="inline-flex items-center px-2 py-1 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-base-content bg-base-100 hover:bg-base-200 focus:outline-none" data-toggle-theme="dark,light" data-act-class="ACTIVECLASS">
                <svg class="-ml-1 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                </svg>
            </button>
        </div>
        <div class="flex mt-0 ml-2">
            <button type="button" class="inline-flex items-center px-2 py-1 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-base-content bg-base-100 hover:bg-base-200 focus:outline-none" onclick="window.location.href = '/'">
                <svg class="-ml-1 mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
                </svg>
                Return Home
            </button>
        </div>
    </div>
</div>